<template>
  <div class="page_main">
    <div class="search-box">
      <el-form ref="searchForm" :inline="true" size="mini" :model="searchForm">
        <search-form-box :show-more-btn="true">
          <template slot="showSearch">
            <el-form-item label="项目：" prop="customer_id">
              <el-select v-model="searchForm.customer_id" filterable clearable placeholder="请选择项目"
                         style="width: 240px"
              >
                <el-option v-for="item in customer_arr" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="合同编号：" prop="contract_num">
              <el-select v-model="searchForm.contract_num" filterable clearable placeholder="请输入合同编号"
                         style="width: 240px"
              >
                <el-option v-for="item in customer_arr" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
          </template>
          <template slot="hideSearch">
            <el-form-item label="合同开始时间：" prop="contract_begin_date">
              <el-date-picker v-model="searchForm.contract_begin_date" type="date" placeholder="合同开始时间"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="至" prop="contract_end_date">
              <el-date-picker v-model="searchForm.contract_end_date" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="合同结束时间：" prop="contract_begin_date">
              <el-date-picker v-model="searchForm.contract_begin_date" type="date" placeholder="合同开始时间"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="至" prop="contract_end_date">
              <el-date-picker v-model="searchForm.contract_end_date" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-table v-loading="tableLoading" :data="tableData" size="mini" border>
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contract_num" label="合同编号" width="200" align="center"/>
        <el-table-column prop="industry_name" label="行业" width="200" align="center"/>
        <el-table-column prop="party_a" label="合同名称" width="200" align="center"/>
        <el-table-column label="合同时间" width="200" align="center">
          <template slot-scope="scope">
            <el-tag size="mini">
              {{
                scope.row.contract_begin_date ? scope.row.contract_begin_date + '~' + scope.row.contract_end_date : ''
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="customer_name" width="200" align="center"></el-table-column>
        <el-table-column label="公司抬头" prop="company_head" width="200" align="center"></el-table-column>
        <el-table-column label="合同是否收回并上传" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.receive_contract ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户负责人" prop="person_in_charge_name" width="100" align="center">
        </el-table-column>
        <el-table-column label="维护人" prop="maintenance_staff_name" width="100" align="center">
        </el-table-column>
        <el-table-column label="合同金额" prop="contract_amount" width="100" align="center">
        </el-table-column>
        <el-table-column label="往年已收现金金额" prop="amount_received_in_previous_years" width="100" align="center">
        </el-table-column>
        <el-table-column label="往年已收置换物品金额" prop="displace_amount_from_previous_years" width="100"
                         align="center"
        >
        </el-table-column>
        <el-table-column label="往年已收置换消费金额" prop="displace_consume_amount_from_previous_years" width="100"
                         align="center"
        >
        </el-table-column>
        <el-table-column :label="year+'收款信息'" align="center">
          <el-table-column label="已收现金金额" prop="amount_this_year" width="150" align="center">
          </el-table-column>
          <el-table-column label="已收置换物品金额" prop="displace_amount_this_year" width="150" align="center">
          </el-table-column>
          <el-table-column label="已收置换消费金额" prop="displace_consume_amount_this_year" width="150" align="center">
          </el-table-column>
          <el-table-column label="增项金额" prop="additional_amount_this_year" width="150" align="center">
          </el-table-column>
          <el-table-column label="应收现金金额" prop="amount_of_cash_receivable_for_this_year" width="150"
                           align="center"
          >
          </el-table-column>
          <el-table-column label="应收置换物品金额" prop="amount_of_replacement_consumption_receivable_this_year"
                           width="150" align="center"
          >
          </el-table-column>
          <el-table-column label="应收置换消费金额" prop="amount_replacement_receivable_this_year" width="150"
                           align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="合同入档编号" fixed="right" width="200" align="center">
          <template slot-scope="{row}">
            <div v-if="row.edit">
              <el-input v-model="row.contract_filing_no_back" size="mini" placeholder="请输入合同入档编号" clearable
              ></el-input>
              <div>
                <el-button type="text" @click="row.edit = false">保存</el-button>
                <el-button type="text" @click="row.edit = false">取消</el-button>
              </div>
            </div>
            <div v-else>
              {{ row.contract_filing_no }}
              <div>
                <el-button type="text" @click="row.edit = true">修改</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary"
                       @click="showBillSaleGroupListDialog(row)"
            >查看销售单组别
            </el-button>
            <el-button v-if="!row.receive_contract" size="mini" type="success"
            >收到结算材料
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10,20,50,100, 200,400]"
                   layout="total, sizes, prev, pager, next, jumper" :page-size.sync="searchForm.page_size"
                   :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"
    />
    <bill-group-list-dialog ref="dialog" :title="title" :contract-id="contract_id"></bill-group-list-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox/index.vue'
import { company_list_all } from '@/api/customer/customer'
import { contract_list } from '@/api/contract_manage'
import BillGroupListDialog from '@/views/finance/contract_manage/components/billGroupListDialog.vue'

export default {
  name: 'ContractManageBuy',
  components: { BillGroupListDialog, SearchFormBox },
  data() {
    return {
      searchForm: {
        page: 1,
        page_size: 10,
        customer_id: null,
        contract_begin_date: null,
        contract_end_date: null,
        contract_num: null
      },
      listParams: {
        page: 1,
        page_size: 10,
        customer_id: null,
        contract_begin_date: null,
        contract_end_date: null,
        contract_num: null
      },
      tableLoading: false,
      tableData: [],
      total: 0,
      customer_arr: [],
      year: '',
      title: '',
      contract_id: null
    }
  },
  created() {
    const now = new Date()
    this.year = now.getFullYear()
    this.getList()
    this.initCustomerArr()
  },
  methods: {
    getList() {
      this.listParams = Object.assign({}, this.searchForm)
      this.tableLoading = true
      contract_list(this.listParams).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        this.total = res.data.total
        this.tableData.forEach(item => {
          this.$set(item, 'contract_filing_no_back', item.contract_filing_no)
          this.$set(item, 'edit', false)
        })
      }).catch(() => {
        this.tableLoading = false
        this.tableData = []
      })
    },
    search() {
      this.searchForm.page = 1
      this.getList()
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    initCustomerArr() {
      company_list_all({}).then(res => {
        this.customer_arr = res.data
      })
    },
    showBillSaleGroupListDialog(row) {
      this.title = row.party_a + '——' + row.contract_filing_no + ('(此处是合同名称加上归档编号)')
      this.contract_id = row.id
      this.$refs.dialog.show()
    }
  }
}
</script>

<style scoped>
.page_main {
  padding: 20px;
}
</style>
